<style scoped lang="scss">

</style>

<template>
  <div>

    <el-form :inline="true" :model="queryParams" class="demo-form-inline">
      <el-form-item label="分类名称 : ">
        <el-input v-model="queryParams.cthrName" placeholder="分类名称"></el-input>
      </el-form-item>
      <el-form-item label="分类代号 : ">
        <el-input v-model="queryParams.cthrCode" placeholder="分类代号"></el-input>
      </el-form-item>
      <el-form-item label="序号 从">
        <el-input v-model="queryParams.cthrNumFrom" placeholder="从"></el-input>
      </el-form-item>
      <el-form-item label="到">
        <el-input v-model="queryParams.cthrNumTo" placeholder="到"></el-input>
      </el-form-item>
      <el-form-item label="二级分类 : ">
        <el-select v-model="queryParams.ctwoId" placeholder="二级分类">
          <el-option v-for="item in ctwoList"
                     :key="item.ctwoId"
                     :label="item.ctwoName"
                     :value="item.ctwoId">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="一级分类 : ">
        <el-checkbox-group v-model="checkedList">
          <el-checkbox v-for="item in coneList" :label="item.coneId">
            {{item.coneName}}
          </el-checkbox>
        </el-checkbox-group>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="query">查询</el-button>
      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button type="primary" plain icon="el-icon-plus" size="mini">新增</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button type="danger" plain icon="el-icon-delete" size="mini">删除</el-button>
      </el-col>
    </el-row>

    <br>

    <el-table :data="tableData" v-loading="loading" stripe border>

      <el-table-column prop="cthrId" label="三级分类主键">
      </el-table-column>
      <el-table-column prop="coneName" label="一级分类">
      </el-table-column>
      <el-table-column prop="ctwoName" label="二级分类">
      </el-table-column>
      <el-table-column prop="cthrName" label="分类名称">
      </el-table-column>
      <el-table-column prop="cthrNum" label="分类序号">
      </el-table-column>
      <el-table-column prop="cthrCode" label="分类代号">
      </el-table-column>
      <el-table-column prop="cthrInfo" label="分类说明">
      </el-table-column>

    </el-table>

    <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="queryParams.pageNum"
        :page-sizes="[5, 10, 20, 50]"
        :page-size="10"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
    </el-pagination>

  </div>
</template>

<script>
import axios from "axios";

export default {
  name: "categoryThree",
  components: {
    axios
  },
  created() {
    this.getConeList()
    this.getCtwoList()
    this.getList()
  },
  data() {
    return {
      tableData: [],
      coneList: [],
      ctwoList: [],
      circleUrl: "https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png",
      total: 0,
      checkedList:[],
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        cthrName: null,
        cthrCode: null,
        cthrNumFrom: null,
        cthrNumTo: null,
        ctwoId: null,
        coneIds: null
      },
      loading: false
    }
  },
  methods: {
    query() {
      this.pageNum = 1
      this.queryParams.coneIds = this.checkedList.join(",")
      console.log("queryParams",this.queryParams)
      this.getList()
    },
    handleSizeChange(pageSize) {
      console.log("pageSize",pageSize)
      this.queryParams.pageSize = pageSize
      this.getList()
    },
    handleCurrentChange(pageNum) {
      console.log("pageNum",pageNum)
      this.queryParams.pageNum = pageNum
      this.getList()
    },
    dateFormat(row, column, cellValue, index) {
      return cellValue ? cellValue.substring(0, 10) : cellValue
    },
    infoFormat(row, column, cellValue, index) {
      return cellValue.length > 10 ? cellValue.substring(0, 10) + "..." : cellValue
    },
    getList() {
      this.loading = true
      axios({
        method: 'get',
        url: 'http://localhost:9090/categoryThree/page',
        params: this.queryParams
      }).then(res => {
        this.tableData = res.data.rows
        this.total = res.data.total
        this.loading = false
      })
    },
    getConeList() {
      this.loading = true
      axios({
        method: 'get',
        url: 'http://localhost:9090/categoryOne/list'
      }).then(res => {
        this.coneList = res.data.data
        this.loading = false
      })
    },
    getCtwoList() {
      this.loading = true
      axios({
        method: 'get',
        url: 'http://localhost:9090/categoryTwo/list'
      }).then(res => {
        this.ctwoList = res.data.data
        this.loading = false
      })
    },
    handleClick() {
      alert('button click');
    },
    onSubmit() {
      console.log('submit!');
    }

  }
}
</script>